<template>
    <mmv-link class="mmv-account-title" target="_blank" title="原神米游姬" to="/">
        <span class="mmv-account-title__name">原神米游姬</span>
        <img class="mmv-img-icon mmv-account-title__level" src="https://img-static.mihoyo.com/level/level16.png" />
        <span class="mmv-account-title__label mmv-account-title__landlord" v-if="isLandlord"></span>
        <span class="mmv-account-title__label mmv-account-title__official" v-if="isOfficial"></span>
        <span class="mmv-account-title__label mmv-account-title__moderator" v-if="isModerator"></span>
    </mmv-link>
</template>

<script>
export default {
    name: "mmv-account-title",
    props: {
        isLandlord: {
            type: Boolean,
            default: false,
        },
        isOfficial: {
            type: Boolean,
            default: false,
        },
        isModerator: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

<style lang="less">
.mmv-account-title {
    display: inline-block;
    font-size: 0;
    line-height: 20px;
    vertical-align: top;
    &__name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    > * {
        font-size: 14px;
        display: inline-block;
        vertical-align: middle;
    }
    &__name {
        color: #666;
        max-width: 180px;
    }
    &__level {
        margin-left: 6px;
        height: 16px;
    }
    &__label {
        width: 28px;
        height: 16px;
        display: inline-block;
        flex-shrink: 0;
        margin-left: 6px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    &__landlord {
        background-image: url();
    }
    &__official {
        background-image: url();
    }
    &__moderator {
        background-image: url();
    }
    a&:hover &__name {
        color: #00c3ff;
    }
}
</style>